<template>
  <el-collapse-transition>
    <el-form :model="model" ref="searchForm" size="small" :inline="true" label-width="68px">
      <slot></slot>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="query()">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="reset()">重置</el-button>
      </el-form-item>
      <div class="showBtn" v-if="showMoreBtn" @click="showSearchItem">
        <span v-html="isShowAll ? '收起' : '展开'"></span>
        <svg-icon :icon-class="isShowAll ? '向上' : '向下'" fill-color="#909399"/>
      </div>
    </el-form>
  </el-collapse-transition>
</template>

<script>

export default {
  name: 'index',
  props: {
    model: {
      type: Object
    },
    query: {
      require: true,
      type: Function,
      default: null
    },
    reset: {
      require: true,
      type: Function,
      default: null
    },
    maxItem:{
      default: 4,
      type: Number,
    }
  },
  data() {
    return {
      itemNodes: null,
      isShowAll: false,
    }
  },
  mounted() {
    this.hiddenItem()
  },
  computed: {
    showMoreBtn() {
      return this.$slots.default.length > this.maxItem
    }
  },
  methods: {
    //隐藏超出的搜索条件
    hiddenItem() {
      this.itemNodes = this.$slots.default
      if (this.showMoreBtn) {
        for (let i = this.maxItem; i < this.itemNodes.length; i++) {
          this.itemNodes[i].elm.style.display = 'none'
        }
      }

    },
    showSearchItem() {
      this.isShowAll = !this.isShowAll
      let hiddenCss = this.isShowAll ? '' : 'none'
      for (let i = this.maxItem; i < this.itemNodes.length; i++) {
        this.itemNodes[i].elm.style.display = hiddenCss
      }
    },
    handleQuery(){
      this.query();
    },
    resetQuery(){
      this.reset();
    },
    resetFields(){
      this.$refs['searchForm'].resetFields();
      // this.itemNodes.forEach(node => {
      //   node.componentInstance.resetField();
      // })
    }
  }
}
</script>

<style scoped>
.showBtn{
  cursor: pointer;
  display: inline-block;
  line-height: 34px;
  font-size: 14px;
}
</style>
